<template>
  <div v-if="getShow" class="animate__animated animate__slideInRight">
    <div class="text-30px font-bold mb-4">登录</div>
    <a-form
      ref="formRef"
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[{ required: true, message: '请输入你的账号!' }]"
      >
        <a-input class="input" v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: '请输入你的密码!' }]"
      >
        <a-input-password class="input" v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember">
        <div style="display: flex; justify-content: space-between">
          <div>
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
          </div>
          <div>忘记密码?</div>
        </div>
      </a-form-item>

      <a-form-item>
        <a-button class="w-full" type="primary" html-type="submit"
          >登录</a-button
        >
      </a-form-item>
    </a-form>
    <div class="flex justify-between">
      <a-button class="w-31">手机登录</a-button>
      <a-button class="w-31">二维码登录</a-button>
      <a-button class="w-31" @click="switchRegister">注册</a-button>
    </div>
  </div>
  <Verify
    @success="onSuccess"
    mode="pop"
    :captchaType="captchaType"
    :imgSize="{ width: '400px', height: '200px' }"
    ref="verify"
  ></Verify>
</template>

<script setup lang="ts">
import type { UserLoginDto } from "@/api";
import Verify from "@/component/verifition/Verify.vue";
import { FormStatus, useUserStore } from "@/stores/useUser";
import type { FormInstance } from "ant-design-vue";
import { storeToRefs } from "pinia";
import { computed, reactive, ref } from "vue";
const formRef = ref<FormInstance>();
const userStore = useUserStore();
const { getStatus } = storeToRefs(userStore);

const verify = ref<any>(null);
const captchaType = ref("blockPuzzle");

/**
 * 切换注册
 */
const { switchRegister, login } = userStore;
/**
 * 是否显示
 */
const getShow = computed<boolean>(
  () => getStatus.value == FormStatus.LoginForm
);
/**
 * 表单数据
 */
const formState = reactive<UserLoginDto>({
  username: "ztf",
  password: "admin",
  remember: false,
  captchaVO: {},
});

/**
 * 表单提交
 */
const onFinish = (values: UserLoginDto) => {
  verify.value.show();
  console.log("Success:", values);
};

const onSuccess = (params: any) => {
  formState.captchaVO.captchaVerification = params.captchaVerification;
  login(formState);
};

/**
 * 表单提交失败
 */
const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped></style>
